<template>
	<view class="login">
		<view class="loginWarp" v-if="showLogin">
			<h1>欢迎登录</h1>
			<input type="text" placeholder="请输入用户名" v-model:value="loginData.user">
			<input type="password" placeholder="请输入密码" v-model:value="loginData.password">
			<checkbox-group @change="checkboxChange" style="margin: 50rpx 0;">
				<label>
					<checkbox style="transform:scale(0.7)" value="相关负责人审核" :checked="state" />记住密码
				</label>
			</checkbox-group>
			<view class="">
				{{ vailData }}
			</view>
			<button type="primary" @tap="handleLogin(loginData)">登录</button>
			<view class="toResiger">
				<span @tap="handles">注册</span>
				<span @tap="forget">忘记密码</span>
			</view>
		</view>
		<view class="loginWarp" v-else>
			<h1>欢迎注册</h1>
			<input type="text" placeholder="请输入电话号码" v-model:value="registerData.phone">
			<input type="text" placeholder="请输入用户名" v-model:value="registerData.user">
			<input type="password" placeholder="请输入密码" v-model:value="registerData.password">
			<input type="password" placeholder="请重复密码" v-model:value="registerData.repassword">
			<view class="">
				{{ vailData }}
			</view>
			<button type="primary" @tap="handleLogin(registerData)">注册</button>
			<view class="toResiger" @tap="handles">已注册，去登录</view>
		</view>
		<view class="showToast" v-if="showToa">
			<view class="formP">
				<input type="number" placeholder="请输入注册电话号码!" v-model:value="temPhone">
				<view class="button">
					<button type="primary" @tap="cancel">取消</button>
					<button type="primary" @tap="submit">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addColorUser,
		loginColor
	} from "../../api/index.js"
	export default {
		data() {
			return {
				showLogin: true,
				showToa: false,
				vailData: '',
				temPhone: null,
				state: 'true',
				loginData: {
					user: '',
					password: '',
				},
				registerData: {
					user: '',
					phone: '',
					password: '',
					repassword: ''
				}
			}
		},
		onShow() {
			this.rementData()
		},
		methods: {
			rementData(){
				let tem = uni.getStorageSync("reuser");
				console.log(tem,'tem');
				if(tem){
					this.loginData = tem
				}
				 else {
					// uni.removeStorageSync("reuser")
					this.loginData.user = ''
					this.loginData.password = ''
				}
			},
			checkboxChange(e) {
				this.state = !this.state;
				console.log(this.state);
				this.rementData()
			},
			async handleLogin(data) {
				// console.log(this.showLogin);
				this.handleVail(data);
				let url = null;
				let showTitle = null;
				// console.log('ddd');
				if (!this.showLogin) {
					// console.log(res,'sss');
					let res = addColorUser(data);

				} else {
					
					let res = await loginColor(data);
					if (res.data.code === 1000) {
						url = "/pages/index/index";
						uni.setStorageSync('users', data.user)
						if(this.state){
							uni.setStorageSync("reuser",data);
						} else {
							uni.removeStorageSync("reuser")
							
						}
					}

				}
				uni.switchTab({
					url: url
				})
			},
			handles() {
				this.showLogin = !this.showLogin
			},
			//输入框校验
			handleVail(data) {
				if (data.user === '' || data.password === '') {
					this.vailData = '输入框不可为空'
					return
				} else if (data.phone && data.phone === '' || data.repassword === '') {
					this.vailData = '输入框不可为空'
					return
				} else if (data.repassword && data.repassword !== data.password) {
					this.vailData = '密码不一致'
					return
				} else if (data.phone && !this.checkPhone(data.phone)) {
					this.vailData = '请输入有效的号码！';
					return
				} else {
					this.vailData = ''
				}
			},
			//电话号码验证
			// checkPhone() {
			//       let tel = /^0\d{2,3}-?\d{7,8}$/;
			//       let phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
			//       if(this.registerData.phone.length == 11){//手机号码
			//         if(phone.test(this.registerData.phone)) {
			//           return true;
			//         } else {
			// 			return false
			// 		}
			//       }else if(this.registerData.phone.length == 13 && this.registerData.phone.indexOf("-") != -1 ){//电话号码
			//         if(tel.test(this.registerData.phone)) {
			//           console.log(this.registerData.phone);
			//           return true;
			//         } else {
			// 			return false
			// 		}
			//       } else {
			// 		  return false
			// 	  }
			//     },
			checkPhone(data) {
				let tel = /^0\d{2,3}-?\d{7,8}$/;
				let phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
				if (data.length == 11) { //手机号码
					if (phone.test(data)) {
						return true;
					} else {
						return false
					}
				} else if (data.length == 13 && data.indexOf("-") != -1) { //电话号码
					if (tel.test(data)) {
						console.log(data);
						return true;
					} else {
						return false
					}
				} else {
					return false
				}
			},
			cancel() {
				this.showToa = false
				this.temPhone = null
			},
			async submit() {
				if (this.temPhone === null) {
					uni.showToast({
						title: "输入框不能能为空！"
					})
					return
				}
				if (!this.checkPhone(this.temPhone)) {
					uni.showToast({
						title: "请输入有效电话号码！"
					})
					return
				} else {
					let user = uni.getStorageSync('users');
					if (user) {
						let res = await selectUsers({
							user
						});
						if (res.data) {
							uni.navigateTo({
								url: "/pages/person/person?code=" + this.temPhone
							})
							this.showToa = false
						} else {
							uni.showToast({
								title: "验证失败！"
							})
						}
					} else {
						uni.showToast({
							title: "无登录记录，无法验证！"
						})
					}

				}
				this.temPhone = null
			},
			forget() {
				this.showToa = true
			}
		}
	}
</script>

<style scoped>
	page {
		height: 100%;
	}

	.login {
		height: 100vh;
		background: linear-gradient(#AD5389, #3C1053);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loginWarp {
		width: 60%;
		background-color: #fff;
		padding: 80rpx;
		text-align: center;
	}

	.loginWarp input {
		margin: 60rpx 0;
		background: antiquewhite;
		padding: 20rpx;
		/* border-radius: 20rpx; */
	}

	.toResiger {
		margin: 50rpx 0;
		color: red;
		display: flex;
		justify-content: space-around;
	}

	.showToast {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0%;
		z-index: 900;
		background: rgba(0, 0, 0, 0.9);
	}

	.formP {
		padding: 100rpx;
		margin-top: 50%;
	}

	.formP input {
		padding: 20rpx 0;
		margin: 50rpx;
		text-align: center;
		color: #fff;
	}

	.button {
		display: flex;
		justify-content: space-between;
	}
</style>
